<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <link rel="stylesheet" href="/assets/css/layui.css" media="all">
 <link rel="stylesheet" href="/assets/css/amazeui.css">
</head>
<body>
<button
  type="button"
  class="am-btn am-btn-secondary am-radius   am-active am-btn-sm am-icon-plus"
  id="doc-prompt-toggle">
 添加用户
</button>

<table id="demo" lay-filter="test"></table>
<script  src="/assets/layui.js"></script>
<script  src="/assets/js/jquery.min.js"></script>
<script  src="/assets/js/amazeui.min.js"></script>
<script type="text/html" id="img">
  {{#  if(!d.user_img){ }}
        用户没有上传头像
  {{#  } else { }}
   {{ d.user_img }}
  {{#  } }}
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
 <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="add">添加</a>
</script>
<script>
layui.use('table', function(){
  var table = layui.table;
//执行渲染
  table.render({
    elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
    ,height: 315 //容器高度
    ,url:'/admin/layui/selectLists'
    ,cols: [
            [
            {field:'id',title:'ID',width:80,sort:true},
            {field:'user_name',title:'用户昵称',width:150,edit:'text'},
            {field:'user_img',title:'用户头像',width:150,edit:'text',templet:'#img'},
            {field:'realname',title:'用户真实姓名',width:150,edit:'text'},
            {field:'sex',title:'用户性别',width:80,edit:'text'},
            {field:'address',title:'用户住址',width:180,edit:'text'},
            {field:'tel',title:'用户联系方式',width:150,edit:'text'},
            {field:'create_time',title:'用户创建时间',width:180},
            {fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]
    ] //设置表头
    //,…… //更多参数参考右侧目录：基本参数选项
    ,page:true
    ,limits: [10,20,30,40,50]
  });
  //编辑完成 利用layui-table的监听器html dom 的操作+jquery即可
  table.on('edit(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  console.log(obj.value); //得到修改后的值
	  console.log(obj.field); //当前编辑的字段名
	  console.log(obj.data); //所在行的所有相关数据  
	  var data=obj.data;
	  var field=obj.field;
	  var value=obj.value;
	  var id=obj.data.id;
	  data[field] = value; //更新缓存中的值
	  $.get('/admin/layui/edit',{field:field,value:value,id:id},function(data){
		  console.log(data);
		  var obj=eval('('+ data +')');
		  var status=obj.status;
		  if(status==1){
			  layer.msg('更新成功');
		  }else{
			  layer.msg('更新失败');
		  }
	  });
	});
  //下面完成删除 详细的tools的功能
//监听工具条
  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值
    var tr = obj.tr; //获得当前行 tr 的DOM对象
   //console.log(obj.data);
     var id=obj.data.id;
    if(layEvent === 'detail'){ //查看
      //do somehing
     // console.log(tr);
      //这里的就是页面虽然显示的是局部的数据但是当点击这个查看的时候就可以将后台传递的数据从缓存中取出来
      //然后这里做的就是循环的进行取出生成一个表单既可以了
     // console.log(data.full);
   
      
      //这里的数据已经有了只要这个表单的form即可
      //data已注入即可完成html dom 
   layui.use('laytpl', function(){
   var laytpl = layui.laytpl;
   var getTpl = s.innerHTML;
   //console.log(getTpl);
  // view = document.getElementById('view');
   laytpl(getTpl).render(data, function(html){
    //console.log(data);
	   layer.open({
			  type:1,
			  title:'<b style='+'color:#009688'+'>用户'+ data.user_name+'详细信息</b>',
			  content:html,
			  area: ['500px', '500px']
			  
		  });
   });
   });
 
  
   
     
     
  
      
    } else if(layEvent === 'del'){ //删除
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
        layer.close(index);
        $.get('/admin/layui/delete',{id:id},function(data){
        	var obj=eval('('+ data +')');
        	var status=obj.status;
        	if(status==1){
        		layer.msg('删除成功');
        	}else{
        		alyer.msg('删除失败');
        	}
        })
        //向服务端发送删除指令
      });
    } else if(layEvent === 'edit'){ //编辑
      //do something
      //编辑也是但是这个编辑是整个表单的整体的编辑 但是往往上面的比较好
      //同步更新缓存对应的值
      
    }else if(layEvent === 'add'){
           
    }
  });
  
  
	  
  
  
});
$(function() {
	  $('#doc-prompt-toggle').on('click', function() {
		  layui.use('layer', function(){
			  var layer = layui.layer;
			  layer.open({
				  type:1,
				  title:'添加用户',
				  content:$('#fxy').html(),
				  area: ['500px', '400px'],
				  btn: ['提交', '重置'],
				  maxmin: true
			  ,yes: function(index, layero){
			    //按钮【按钮一】的回调
			     value='';
			     field='';
			    count=$('#s2 input').size();
			   //如果设定了yes回调，需进行手工关闭
			    $.each($('#s2 input'),function(i,item){
			    	//console.log(i);
			    	//console.log(item);
			    	//console.log($(item).val());
			    	//console.log($(item).attr('name'));
			    	
			    	
			    	if(i!=count-1){
			    		value+=$(item).val()+',';//表单值
			    		
			    	}else{
			    		value+=$(item).val();
			    	}

			    	if(i!=count-1){
			    		field+=$(item).attr('name')+',';//表单值
			    		
			    	}else{
			    		field+=$(item).attr('name');
			    	}
			  

			    	//console.log(item.attr('name'));
			    })
			   
			    //console.log(value);
			   //console.log(field);
			   
			    //这里使用了一个if一半一半的思想即可
			    
			 $.get('/admin/layui/add',{value:value,field:field},function(data){
				var obj=eval('('+ data + ')');
				//console.log(data);
				status=obj.status;
				if(status==1){
					layer.msg('添加成功');
					 layer.close(index); 
				}else{
					layer.msg('添加失败',{icon:2});
				}
			 });
			  }
			  ,btn2: function(index, layero){
			    //按钮【按钮二】的回调
			    console.log(index);
			    console.log(layero);
			    $('#s2 input').val('');
			    return false 
			  }
			  ,cancel: function(index, layero){ 
			    //右上角关闭回调
				  if(layer.confirm('确定要关闭么'))
				  { //只有当点击confirm框的确定时，该层才会关闭
					    layer.close(index)
			      }
					 
			    //return false 开启该代码可禁止点击该按钮关闭
			  }
			  
			 
			  
			});      
	  });
	  });
	});
</script>
<div id="view"></div>

<script id="s" type="text/html">

<ul class="am-list am-list-static am-list-border  am-list-striped am-text-truncate">
{{#  layui.each(d, function(index, item){ }}
  <li>
<span class="am-badge am-badge-success">YES</span>
    <i class="am-icon-btn am-icon-twitter am-success"></i>
  <i>{{ index }}</i>
    {{ item }}</li>
  <li>
{{#  }); }}
</ul>

  
</script>
<script type="text/html" id='fxy'>
<form class="am-form" id='s2'>
  <fieldset>
    <legend>添加用户</legend>

    <div class="am-form-group">
      <label for="doc-ipt-email-1">用户昵称</label>
      <input type="email" class="" id="doc-ipt-email-1" placeholder="输入用户昵称" name='user_name'>
    </div>

    <div class="am-form-group">
      <label for="doc-ipt-pwd-1">用户地址</label>
      <input type="text" class="" id="doc-ipt-pwd-1" placeholder="输入用户地址" name='address'>
    </div>
<div class="am-form-group">
      <label for="doc-ipt-pwd-1">用户联系方式</label>
      <input type="text" class="" id="doc-ipt-pwd-1" placeholder="输入用户联系方式" name='tel'>
    </div>
<div class="am-form-group">
      <label for="doc-ipt-pwd-1">用户真实姓名</label>
      <input type="text" class="" id="doc-ipt-pwd-1" placeholder="用户真实姓名" name='realname'>
    </div>
  </fieldset>
</form>

</script>
</body>
</html>